<template>
    <div class="user-login">
        <div class="user-login-bg" :style="{'background-image':`url(${backgroundImage})`}"></div>
        <div class="content-wrapper">
            <h2 class="slogan">
                <!--欢迎使用 <br />  -->
            </h2>
            <div class="form-container">
                <h4 class="form-title">登录</h4>
                <el-form ref="form" :model="user" label-width="0">
                    <div class="form-items">
                        <el-row class="form-item">
                            <el-col>
                                <el-form-item prop="username" :rules="[ { required: true, message: '会员名/邮箱/手机号不能为空'}]">
                                    <div class="form-line">
                                        <i class="el-icon-edit-outline input-icon"></i>
                                        <el-input placeholder="会员名/邮箱/手机号" v-model="user.username"></el-input>
                                    </div>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row class="form-item">
                            <el-col>
                                <el-form-item prop="password" :rules="[ { required: true, message: '密码不能为空'}]">
                                    <div class="form-line">
                                        <i class="el-icon-service input-icon"></i>
                                        <el-input type="password" placeholder="密码" v-model="user.password"></el-input>
                                    </div>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row class=form-item>
                            <el-col>
                                <el-form-item>
                                    <el-checkbox class="checkbox">记住账号</el-checkbox>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row class="form-item">
                            <el-button type="primary" class="submit-btn" size="small" @click="submitBtn">
                                登 录
                            </el-button>
                        </el-row>
                    </div>
                    <el-row class="tips">
                        <a href="/" class="link">
                            立即注册
                        </a>
                        <span class="line">|</span>
                        <a href="/" class="link">
                            忘记密码
                        </a>
                    </el-row>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
    import BasicContainer from '@vue-materials/basic-container';

    const backgroundImage =
        'http://img.netbian.com/file/2016/0207/691f602dad5817513d55d2ae945ddf47.jpg';
    export default {
        components: {BasicContainer},
        name: 'UserLogin',

        data() {
            return {
                backgroundImage: backgroundImage,
                user: {
                    username: '',
                    password: '',
                },
            };
        },

        created() {
        },

        methods: {
            submitBtn() {
                this.$refs['form'].validate((valid) => {
                        if (valid) {
                            this.$axios.post("/api/user/login", this.user).then(res => {
                                if (res.data.code === 0) {
                                    // 登录成功
                                    const token = res.data.data;

                                    localStorage.setItem("token", token);

                                    // 存储数据到vuex
                                    this.$store.dispatch("setIsAuthenticated", !this.isEmpty(token));

                                    this.$axios.get("/api/menu/menus").then(res => {
                                        if (res.data.code === 0) {
                                            window.sessionStorage.routes = JSON.stringify(res.data.data);
                                            this.$router.push("/home");
                                        }


                                    });
                                }
                            });
                        } else {
                            console.log("error submit!!");
                            return false;
                        }
                    }
                )
                ;
            },

            isEmpty(value) {
                return (
                    value === undefined ||
                    value === null ||
                    (typeof value === "object" && Object.keys(value).length === 0) ||
                    (typeof value === "string" && value.trim().length === 0)
                );
            },
        },
    }
    ;
</script>

<style lang="scss" scoped>
    @import './UserLogin.scss';
</style>
